<!DOCTYPE html>
<html lang="en">
<head>
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="UTF-8">
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport"
              content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
        <link rel="stylesheet" href="/js/layui/css/layui.css" media="all">
        <link rel="stylesheet" href="/admin/css/common.css" media="all">
        <script src="/js/layui/layui.all.js"></script>

    </head>
    </head>
<body>
<table id="t" lay-filter="t" style="margin-left: 50px">
</table>


<script type="text/html" id="operator">
    {{#  if (d.status==0) {  }}
    <input type="button" value="启用" class="layui-btn layui-btn-sm" lay-event="enable"/>
    {{# }else{  }}
    <input type="button" value="禁用" class="layui-btn layui-btn-sm" lay-event="disable"/>
    {{# }  }}

    <input type="button" value="上移" class="layui-btn layui-btn-sm" lay-event="up"/>
    <input type="button" value="下移" class="layui-btn layui-btn-sm" lay-event="down"/>
</script>

</body>
</html>

<script>
    var $ = layui.$;
    var table = layui.table;
    table.render({
        url: '/api/type/findAll',
        elem: '#t',
        id: 'tt',
        cols: [[
            {
                title: "序号", unresize: true, width: "80", align: "center", templet: function (d) {
                    return '<div>' + (d.LAY_TABLE_INDEX + 1) + '</div>';
                }

            },

            {field: 'name', unresize: true, title: "名称", width: "200", align: "center", edit: 'text'},

            {
                field: 'status', unresize: true, title: "状态", width: "200", align: "center", templet: function (d) {
                    return d.status == 1 ? "已启用" : "已禁用";
                }
            },


            {title: "操作", unresize: true, width: "200", align: "center", toolbar: '#operator'}


        ]]
    });


    //    右侧按钮的的监听事件
    table.on('tool(t)', function (obj) {
            var getdata = obj.data //获得当前行数据
            var layEvent = obj.event //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var tr = obj.tr //获得当前行 tr 的 DOM 对象（如果有的话）
            console.log(getdata);
            switch (layEvent) {
                case 'enable':
                    //tr.children().eq(2).html("已启用");
                    //getdata.status=1;
                    $.ajax({
                        url: '/api/type/status/' + getdata.id,
                        data: {s: 1},
                        success: function (res) {
                            table.reload('tt');
                        }
                    });
                    break;
                case 'disable':
                    $.ajax({
                        url: '/api/type/status/' + getdata.id,
                        data: {s: 0},
                        success: function (res) {
                            table.reload('tt');
                        }
                    });
                    //tr.children().eq(2).html("已禁用");
                    //getdata.status=0;
                    break;
                case 'up':
                    var preTr = tr.prev();//上一个兄弟
                    tr.insertBefore(preTr);
                    resort();
                    writeDB(getdata.id,1);
                    break;
                case 'down':
                    var nextTr = tr.next();
                    tr.insertAfter(nextTr);
                    resort();
                    writeDB(getdata.id,2);
                    break;
            }
        }
    );


    //编辑框改变事件
    table.on('edit(t)', function (obj) {
        var data = obj.data; //整行数据
        //var value = obj.value; //新内容
        //var field = obj.field; //修改的字段

        $.ajax({
            url: '/api/type/edit',
            data: data,
            method:'post',
            success: function(res)
           {
                layer.msg('修改成功',{icon:1,time:500})
           }
          });



    })

    function  resort() {
         $("tr").each(function(i,tr){
            if (i>0)
            {
                $(tr).children("td:first").find("div").html(i);
            }
         });
        // console.log(table.cache);

    }

    // type=1上移 type=2下移
    function  writeDB(id,type) {

        $.ajax({
            url:'/api/type/changeSort',
            data:{id:id,type:type},
            success:function(res)
            {

            }
        })
    }


</script>

